React组件性能优化

纯函数

1.PureRender是React组件开发中一个重要的概念,PureRender中的Pure指的就是组件满足纯函数的条件,
即组件的渲染是被相同的props和state渲染进而得到相同的结果.
2.react-addons-pure-render-mixin插件,其原理为重新实现了shouldComponentUpdate生命周期方法,
让当前传入的props和state与之前的作浅比较,如果返回false,那么组件就不会执行render方法.
这里讲到了用shouldComponentUpdate来做性能优化的方法,在理想情况下,不考虑props和state的类型,
那么要做到充分比较,只能通过深比较,但它实在是太昂贵了.
然后PureRender对object只做了引用比较,并没有做值比较.

shallowEqual(obj, newObj) {
    if (obj === newObj) {
        return true;
    }

    const objKeys = Object.keys(obj);
    const newObjKeys = Object.keys(newObj);

    if (objKeys.length !== newObjKeys.length) {
        return false;
    }

    // 关键代码,
}

shouldComponentUpdate(props, state) {
    console.log(props);
    console.log(state);

    if (state.a === 3) {
        return false;
    }

    return true;
}

key

1.写动态子组件的时候,如果没有给动态子项添加key prop,则会报一个警告.
这个警告指的是,如果每一个子组件是一个数组或迭代器的话,那么必须有一个唯一的key prop.
key用来标识当前项的唯一性的props.
如过key={ index },把key设成了序号,这么做的确不会报警了,但这是非常低效的做法.
我们在生产环境下常常犯这样的错误,这个key是每次用来做Virtual DOM diff的,每一位同学都用序号
来更新的问题是它没有和同学的唯一信息相匹配,相当于用了一个随机键,那么无论有没有相同的项,
更新都会被渲染.
因此,对key有一个原则,那就是独一无二,且能不用遍历或随机值就不用,除非列表内容也并不是唯一的表示,
且没有可以相匹配的属性.

class Collections extends Component {
    constructor(props) {
        super(props);
        this.state = {
            a: 1,
            array: [{
                sid: '1',
                name: 'aaa'
            }, {
                sid: '2',
                name: 'bbb'
            }, {
                sid: '3',
                name: 'ccc'
            }]
        }
    }

    render() {
        return (
            <div className="collections">
            {
                this.state.array.map((item, index) => {
                    return (
                        <div key={ item.sid }>{ item.name }</div>
                    )
                })
            }
            </div>
        );
    }
}